<template>
  <!-- POI信息弹窗 -->
  <uni-popup class="poi-popup" :showHeader="false" :isMaskClick="true" ref="poi_confirm" type="center" title="客源线索认领">
    <view class="popup-content">
      <!-- 关闭按钮 -->
      <view class="close-btn" @click="closePopup">×</view>
      
      <!-- 图片轮播区 -->
      <swiper class="swiper-box" indicator-dots autoplay circular>
        <swiper-item v-for="(img, index) in poiData.photos" :key="index">
          <image :src="img" mode="aspectFill" class="swiper-img"  @click="previewImage"/>
        </swiper-item>
      </swiper>
      
      <!-- POI信息区 -->
      <view class="poi-info">
        <view class="poi-name">{{ poiData.name }}</view>
        <view class="info-item">
          <uni-icons type="location" size="18" color="#666"></uni-icons>
          <text class="info-text">{{ poiData.address || '地址未提供' }}</text>
        </view>
        <view class="info-item">
          <uni-icons type="phone" size="18" color="#666"></uni-icons>
          <text class="info-text">{{ poiData.phone || '电话未提供' }}</text>
        </view>
      </view>
      
      <!-- 认领按钮 -->
      <!-- <button class="claim-btn" @click="handleClaim">认领此地点</button> -->
    </view>
  </uni-popup>
</template>

<script>
export default {
	data() {
		return {
			poiData:{
				name: '',
				address: '',
				phone: '',
				photos: []
		  }
		}
	},
  methods: {
	previewImage() {
		  uni.previewImage({
		  	urls:this.poiData.photos,
		  	fail:(e)=>{
		  	}
		  })
	},
    // 打开弹窗
    openPopup(data) {
		this.poiData = data
      this.$refs.poi_confirm.open()
    },
    
    // 关闭弹窗
    closePopup() {
      this.$refs.poi_confirm.close()
    },
    
    // 处理认领操作
    handleClaim() {
      uni.showModal({
        title: '确认认领',
        content: `确定要认领 ${this.poiData.name} 吗？`,
        success: (res) => {
          if (res.confirm) {
            this.$emit('claim', this.poiData)
            this.closePopup()
          }
        }
      })
    }
  }
}
</script>

<style scoped>
/* 弹窗容器 */
.poi-popup {
  z-index: 1000;
}

/* 弹窗内容 */
.popup-content {
  width: 90vw;
  max-width: 600rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
}

/* 关闭按钮 */
.close-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  color: #fff;
  font-size: 40rpx;
  line-height: 45rpx;
  text-align: center;
  z-index: 10;
}

/* 轮播图容器 */
.swiper-box {
	height: 300rpx;
	width: calc(100% - 20px);
	padding: 10px;
}

/* 轮播图片 */
.swiper-img {
  width: 100%;
  height: 100%;
}

/* POI信息区 */
.poi-info {
  padding: 30rpx;
}

.poi-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15rpx;
  font-size: 28rpx;
}

.info-text {
  margin-left: 10rpx;
  color: #666;
  line-height: 1.5;
}

/* 认领按钮 */
.claim-btn {
  margin: 30rpx;
  background-color: #1890ff;
  color: #fff;
  border-radius: 50rpx;
}
</style>